<template>
  <div class="bar-line">
    <div class="chart" :ref="id"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { barLine } from './../../../utils/echarts-option'
export default {
  name: 'barLine',
  props: {
    title: {
      type: Object,
      default: () => {
        return {}
      }
    },
    legend: {
      type: Object,
      default: () => {
        return {}
      }
    },
    xAxis: {
      type: Array,
      default: () => {
        return []
      }
    },
    yAxis: {
      type: Array,
      default: () => {
        return []
      }
    },
    tooltip: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataZoom: {
      type: Object,
      default: () => {
        return {}
      }
    },
    seriesData: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    axis: {
      type: Object
    },
    config: {
      type: Object
    },
    grid: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tooltipsConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    color: {
      type: Array,
      default: () => {
        return []
      }
    },
    colorType: {
      type: String,
      default: 'default'
    },
    isCallback: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data () {
    return {
      id: 'chart' + Math.random(),
      currentWidth: document.body.clientWidth,
      chart: '',
      dataColor: {
        default: ['#486af0', '#f4b23e', '#e03f7b', '#31e883'],
        barPositive: ['#486af0', '#e03f7b', '#f4b23e'],
        pie: [
          new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: '#1560fb'},
            {offset: 0.5, color: '#0a98fd'},
            {offset: 1, color: '#1560fb'}]), '#0b1b4f'
        ]
      }
    }
  },
  methods: {
    initChart () {
      if (this.seriesData.length === 0) {
        return false
      }
      if (this.chart === '') {
        this.chart = echarts.init(this.$refs[this.id])
      } else {
        this.chart.clear()
        this.$refs[this.id].removeChild(this.$refs[this.id].lastElementChild)
      }
      if (this.chart.getHeight() <= 50 || this.chart.getWidth() <= 50) {
        this.resizeChart()
      }
      let chartOption = {
        title: Object.assign({
          textStyle: {
            color: '#fff'
          },
          left: 'center'
        }, this.title),
        tooltip: Object.assign({
          trigger: 'axis',
          textStyle:{
            align:'left'
          },
          axisPointer: {
          	type: 'shadow',
          	lineStyle: {
          		color: '#57617B'
          	},
          	shadowStyle: {
          		color: 'rgba(22, 112, 218, 0.2)'
          	}
          },
          formatter: function (params, ticket, callback) {
            let res = params[0].name
            params.forEach(v => {
              let tValue = v.value
              if (v.seriesName === '同比' || v.seriesName === '月均出租率') {
                tValue = tValue ? (tValue + '%') : tValue
              }
              res += '<br/>' + v.marker + (v.seriesName ? (v.seriesName + '：') : '') + tValue
            })
            return res
          },
          position: function (pos, params, dom, rect, size) {
          	// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
          	// var obj = {top: pos[1]}
          	// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 15
          	dom.style.border = '1px solid #1072e2'
          	dom.style.backgroundColor = 'rgba(7, 23, 62, 0.8)'
          	dom.style.padding = '10px 14px'
            // let messageDom = ''
            // params.forEach(v => {
            //   messageDom += '<div>' + (v.seriesName || v.axisValue) + ': <span style="color: #2e92cb">' + v.value + '</span></span>'
            // })
          	// dom.innerHTML = messageDom
          	// return obj
          }
        }, this.tooltip),
        legend: Object.assign({
          icon: 'roundRect',
          bottom: 0,
          itemWidth: 14,
          itemHeight: 14,
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        }, this.legend),
        grid: Object.assign({
          left: 20,
          right: 20,
          bottom: 30,
          top: 30,
          containLabel: true
        }, this.grid),
        xAxis: this.xAxis.map(v => {
          return Object.assign({
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#7aabe7'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#04427b'
              }
            },
            axisTick: {
              // show: false
            },
            splitLine: {
              // show: false,
              lineStyle: {
                type: 'dashed',
                color: ['#07356f']
              }
            }
          }, v)
        }),
        yAxis: this.yAxis.map(v => {
          return Object.assign({
            position: 'bottom',
            nameTextStyle: {
            	color: '#7aabe7'
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#7aabe7'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#04427b'
              }
            },
            splitLine: {
              lineStyle: {
                // type: 'dashed',
                color: ['#07356f']
              }
            }
          }, v)
        }),
        series: this.seriesData.map(v => {
          let vObj = {}
          if (v.type === 'line') {
            vObj = {
              symbol: 'circle',
              symbolSize: 6
            }
          }
          if (v.type === 'bar') {
            vObj = {
              barMaxWidth: 9,
              barGap: '60%'
            }
          }
          return Object.assign(vObj, v)
        }),
        color: this.color.length > 0 ? this.color : this.dataColor[this.colorType || 'default']
      }
      this.chart.setOption(chartOption)
    },
    resizeChart () {
      this.chart.resize()
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', (v) => {
      if (this.currentWidth !== document.body.clientWidth) {
        this.currentWidth = document.body.clientWidth
        if (this.chart) {
          this.resizeChart()
        }
      }
    })
  },
  watch: {
    seriesData: function (val) {
      this.initChart()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .bar-line{
    width: 100%;
    height: 100%;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
</style>
